<!DOCTYPE html>
<html lang="en">
<!--https://www.w3cplus.com/react/taming-react-setup.html-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
    <style>
        #wf-start ,#wf-end {
            border-radius: 30px; 
            width:60px;
            height: 60px;
            border:4px solid #17A2B8;
            text-align: center;
            line-height:60px;
            margin: 0px auto;
            box-shadow:  0 4px 8px 0 rgba(0,0,0,.16)
        }
        #wf-end {
          border:8px solid #0273DD;
          line-height:50px;
        }
        #defaultCanvas0 {
            z-index: -100;
            position: absolute;
            /*background-color: aqua;*/
            height: 100%;
            width: 100%;
            top: 0px;
        }
        .form-layer label{
            display: block;
            border-bottom: 1px solid #eee;
            padding: 4px;
        }
        .form-layer .form-ly-body{
            margin: 10px;
            padding: 5px;
        }.add_btn {
            text-align: center;
            line-height: 60px;
            height: 60px;
            width: 60px;;
            border-radius: 30px;
            background-color: #eee;
            border: 1px solid #ddd;
            font-size: 60px;
            color: #ccc;
            display: inline-grid;
        }
    </style>
</head>

<body>
    <div class="container">
        <div id="line-box" style="height:100%;width:100%;position:relative">
            <div id="wf-start">开始</div>
            <div style="height:60px;"></div>
            <div class="row">
                <div class="col-md-4">

                </div>
                <div class="col-md-4">
                    <div class="panel panel-default">
                        <div class="panel-heading">提交</div>
                        <div class="panel-body">
                            <div class="form-group">
                                <label for="exampleInputEmail1">流程名称</label>
                                <input type="text" class="form-control" id="exampleInputEmail1" placeholder="流程名称">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">

                </div>
            </div>
            <div id="line_a_box" style="height:60px;"></div>
            <div class="row">
                <div class="panel panel-primary">
                    <div class="panel-heading">审批</div>
                    <div class="panel-body">
                        <div class="panel panel-default">
                            <div class="panel-heading">设置审批流程</div>
                            <div class="panel-body">
                                <div class="form-layer"><label>默认审批流程</label>
                                    <div class="form-ly-body">
                                        <div class="form-layer"><label>默认审批人</label>
                                            <div class="form-ly-body">
                                                <button type="button" class="add_btn" data-toggle="modal" data-target=".bs-example-modal-lg">+</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-layer"><label>分条件审批</label>
                                    <div>
                                        <div>优先级1</div>
                                        <div class="form-ly-body">
                                            <div class="panel panel-default">
                                                <div class="panel-heading">条件1<a href="#">编辑|删除</a></div>
                                                <div class="panel-body">
                                                    <div class="form-layer"><label>审批人</label>
                                                        <div class="form-ly-body">
                                                            <button type="button" class="add_btn" data-toggle="modal"
                                                                data-target=".bs-example-modal-lg">+</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div id="wf_end_line" style="height:60px;"></div>
            <div id="wf-end">结束</div>
        </div>
    </div>
    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">设置审批人</h4>
                </div>
                <div class="modal-body">
                    <div class="form-layer"> <label>审批人类型</label>
                        <div class="form-ly-body">
                            <input name="wf_per_type" type="radio" value="1" />
                            <span>主管-指定一级</span>
                            <input name="wf_per_type" type="radio" value="2" />
                            <span>主管-连续多级</span>
                            <input name="wf_per_type" type="radio" value="3" />
                            <span>制定成员</span>
                            <input name="wf_per_type" type="radio" value="4" />
                            <span>角色（一组固定成员）</span>
                            <input name="wf_per_type" type="radio" value="5" />
                            <span>发起人自己</span>
                        </div>
                    </div>
                    <div class="form-layer"><label>本环节审批方式</label>
                        <div class="form-ly-body">
                            <p><input name="wf_approve_type" type="radio" value="1" />
                                <span>依次审批（本环节内人按顺序审批）</span></p>
                            <p><input name="wf_approve_type" type="radio" value="1" />
                                <span>会签（需所有人共同审批）</span></p>
                            <p><input name="wf_approve_type" type="radio" value="1" />
                                <span>或签（一名审批人同意）</span></p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
    <script src="p5.svg.js" ></script>
    <script>
        function vec2(x, y) {
            this.x = x;
            this.y = y;
        }
        function drawLines(dots) {
            stroke("#2CC427");
            for (var i = 1; i < dots.length; i++) {
                var dota = dots[i - 1];
                var dotb = dots[i];
                line(dota.x, dota.y, dotb.x, dotb.y);
            }
            fill("#2CC427");
            var a = dots[dots.length - 1];

            triangle(a.x, a.y, a.x + 2, a.y - 8, a.x - 2, a.y - 8);
        }
        function draw_starline() {
            var line_box = $("#line-box");
            var a = new vec2(line_box.width() / 2, 60);
            var b = new vec2(line_box.width() / 2, 120);
            var line = [a, b];
            drawLines(line);
        }
        function draw_endline() {
            var line_box = $("#line-box");
            var end_linebox = $("#wf_end_line");
            var a = new vec2(line_box.width() / 2, end_linebox.offset().top - 20);
            var b = new vec2(line_box.width() / 2, end_linebox.offset().top + 60);
            var line = [a, b];
            drawLines(line);
        }
        function draw_line_a() {
            var line_box = $("#line-box");
            var end_linebox = $("#line_a_box");
            var a = new vec2(line_box.width() / 2, end_linebox.offset().top - 20);
            var b = new vec2(line_box.width() / 2, end_linebox.offset().top + 60);
            var line = [a, b];
            drawLines(line);
        }
        function setup() {

            var drawbox = document.getElementById("line-box");
            var myCanvas = createCanvas(drawbox.clientWidth, drawbox.clientHeight, P2D);

            myCanvas.parent('line-box');

            //blendMode('source-atop');
        }

        function draw() {
            background(255);
            draw_starline();
            draw_endline();
            draw_line_a();
        }
    </script>
</body>

</html>